<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../js/layui/css/layui.css" />
<script type="text/javascript" src="../js/layui/layui.js"></script>
</head>
<body>
	<div id="div_product" style="display: none;">
            <form id="add_form" lay-filter="form_product" class="layui-form" onsubmit="return false">
            <input type="hidden" name="id" />
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>商品名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="name" name="name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>形状
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="dial" name="dial" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>市场价
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="sellPrice" name="sellPrice" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>折扣价
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="discountPrice" name="discountPrice" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>商品编号
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="number" name="number" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>产地
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="address" name="address" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>材质
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="watchCase" name="watchCase" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>是否防水
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="waterProof" name="waterProof" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>用处
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="function" name="function" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>表皮材质
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="watchBand" name="watchBand" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>风格
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="style" name="style" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>重量
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="weight" name="weight" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>是否上架
                    </label>
                    <div class="layui-input-inline">
                        <select id="canUse" name="canUse">
							<option value=""></option>
							<option value="上架">上架</option>
							<option value="下架">下架</option>
						</select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>库存
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="stock" name="stock" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>适用人群
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="intendedFor" name="intendedFor" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
              <div class="layui-form-item">
				<label for="name" class="layui-form-label"> 产品展示图片: </label> <br />
				<img id="img" name="img" style="width: 120px" src="" />
				<div class="layui-input-inline">
					<input type="text" id="img" name="img" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
					
				</div>
			</div>
               
                
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label">
                        <span class="x-red">*</span>产品类别
                    </label>
                    <div class="layui-input-inline">
                       <select id="names" name="names">
							<option value=""></option>
							<option value="1">儿童</option>
							<option value="2">青少年</option>
							<option value="3">成人</option>
							<option value="4">老年</option>
							<option value="5">情侣</option>
							<option value="6">其他</option>
						</select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button  class="layui-btn" id="tianJia" lay-submit lay-filter="add_ebike">
                      		  添加
                    </button>
                    <button  class="layui-btn" id="baoCun" lay-submit lay-filter="update_ebike">
                      		  保存
                    </button>
                </div>
            </form>
        </div>
        <!-- 多条件查询 -->
	<div>
		<form class="layui-form" action="" onsubmit="return false">
			<div class="layui-form-item">
			<label class="layui-form-label">商品名：</label>
				<div class="layui-input-inline"  style="width: 90px !important;">
					<input width="100" type="text" name="names" id="names"
						placeholder="" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">形状：</label>
				<div class="layui-input-inline" id="dial2" style="width: 90px !important;">
					<select name="dial"  id="dial1">
						<option value=""></option>
					</select>
				</div>
				<label class="layui-form-label">材质：</label>
				<div class="layui-input-inline"  style="width: 90px !important;">
					<select name="watchCase" style="width: 50px;" id="watchCase1">
						<option value=""></option>
					</select>
				</div>
				<label class="layui-form-label">风格：</label>
				<div class="layui-input-inline"  style="width: 90px !important;">
					<select name="style" style="width: 50px;" id="style1">
						<option value=""></option>
					</select>
				</div>
				<label class="layui-form-label">价格区间：</label>
				<div class="layui-input-inline"  style="width: 90px !important;">
					<input width="100" type="text" name="beginPrice" id="beginPrice1"
						placeholder="0" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline"  style="width: 90px !important;">
					<input width="100" type="text" name="endPrice" id="endPrice1"
						placeholder="10000"  autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="select">搜索</button>
					<button class="layui-btn" lay-submit lay-filter="add">添加</button>
				</div>
				
				
			</div>
		</form>
		
	</div>
<table id="demo" lay-filter="test"></table>
<form class="layui-form x-center" style='display: none'  lay-filter="addRecommend" id="addRecommend" onsubmit="return false" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">商品</label>
				<div class="layui-input-inline">
					<input type="hidden" name="id" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
					<input type="text" name="name" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">推荐类型</label>
				<div class="layui-input-inline">
					<select name="position" id="position" lay-verify="">
						<option value=""></option>
						<option value="推荐A">推荐A</option>
						<option value="推荐B">推荐B</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">权重</label>
				<div class="layui-input-inline">
					<input type="text" name="weights" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
				 
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<button class="layui-btn" onclick="addRecommend()">添加</button>
				</label>

				<div class="layui-input-inline"></div>
			</div>

		</form>




<div id='div_upload' style="display: none">
			<input type="text" id="img_id_upload" name="img_id_upload"
			class="layui-input">
			<input type="text" id="img_url_upload" name="img_url_upload"
			class="layui-input">
			<img alt="" style="height :200px" id='img_upload' src="">
			<div><button type="button" class="layui-btn" id="btn_upload">
			<i class="layui-icon">&#xe67c;</i>上传图片
			</button></div>
	</div></body>
 <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="addRecommend">添加推荐</a>
  <a class="layui-btn layui-btn-xs" onclick="bianJi()" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
</script>
<script>
var table,form,table,$,upload;
layui.use(['table','form','layer','upload'], function(){
  table = layui.table;
  form = layui.form;
  layer = layui.layer;
  $ = layui.$;
  upload = layui.upload;
  
  upload.render({
	    elem: '#btn_upload' //绑定元素
	    ,url: '../upload' //上传接口
	    ,done: function(res){
	    	 $("#img_url_upload").val(res.data);
     		$("#img_upload").attr("src",'../images/'+res.data);
				var id=$("#img_id_upload").val();
				var imgs=$("#img_url_upload").val()
				$.post("../updateImg",{
					id:id,
					img:imgs
				},function(res){
					layer.msg(res.msg)
					layer.closeAll();
					table.reload('tableProduct');
				},"json")
	      //上传完毕回调
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
  //第一个实例
  table.render({
    elem: '#demo'
    ,url: '../hGetProducts' //数据接口
    ,id:'tableProduct',
    method :'post'
    ,height:'500'
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID',  sort: true, fixed: 'left',width:'80'} 
      ,{field: 'img', title: '商品图片',templet: '<div><img src="../images/{{d.img}}"  onclick="showImg(this)" id="{{d.id}}" imgs="{{d.img}}"></div>',width:'120',height:'200'}  
      ,{field: 'name', title: '商品名',width:'120'}
      ,{field: 'dial', title: '形状',width:'120', sort: true}
      ,{field: 'sellPrice', title: '价格',width:'120'} 
      ,{field: 'discountPrice', title: '折扣价',width:'120'} 
      ,{field: 'number', title: '商品编号',width:'120'} 
      ,{field: 'address', title: '产地',width:'120'} 
      ,{field: 'watchCase', title: '材质',width:'120'} 
      ,{field: 'waterProof', title: '是否防水',width:'120'} 
      ,{field: 'function', title: '作用',width:'120'} 
      ,{field: 'watchBand', title: '表皮材质',width:'120'} 
      ,{field: 'style', title: '风格',width:'120'} 
      ,{field: 'weight', title: '重量',width:'120'} 
      ,{field: 'canuse', title: '状态',
    	  templet :function(d){
    		  if(d.canUse=="上架"){
    			  return  '<input type="checkbox" lay-filter="editCanUse" canUse="'+d.canUse+'" id="'+d.id+'" checked="checked" name="canUse" lay-skin="switch" onclick="editCanUse(id="+d.id+",this)" lay-text="上架|下架">'
    		  }else{
    			  return '<input type="checkbox" lay-filter="editCanUse"  canUse="'+d.canUse+'"  name="canUse" id="'+d.id+'"  lay-skin="switch" lay-text="上架|下架">'
    		  }
    	  }
    		,sort: true,width:100}
      ,{field: 'stock', title: '库存',width:'120'}  
      ,{field: 'intendedFor', title: '适用人群',width:'120'}  
      ,{field: '', title: '商品分类',width:'120',
    	  templet :function(d){
    		  console.log(d)
    		  return d.productCategory.name
    	  } 
      } 
      ,{fixed: 'right',title: '操作', width:200, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
    ]]
  });
  
  
//监听工具条 
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    var id = data.id;
   
    if(layEvent === 'addRecommend'){ //改变状态
   		form.val("addRecommend",data);
    	  layer.open({
          	type :1,
          	title : "添加推荐",
          	content : $('#addRecommend'),
          	area : ["500px","500px"]
         }) 
	  }else if(layEvent === 'del'){ //删除
    	$("#tableProduct").html("")
      layer.confirm('真的删除行么', function(index){
    	  $.post("../hDeleteProduct",{
  			id:id
  		},function(res){
  			obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
  			 layer.close(index);
  			//window.location.reload();
  		},"json")
        
       
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){ //编辑
    	$("#baoCun").show();
    	$("#tianJia").hide()
    	$("#add_form")[0].reset();
    	form.val("form_product",data)
		layer.open({
			type : 1,
			content : $("#div_product"),
			area : [ '500px', '800px' ]
		})
		
		return false;
    } else if(layEvent === 'LAYTABLE_TIPS'){
      layer.alert('Hi，头部工具栏扩展的右侧图标。');
    }
  });
  /* 查询 */
	form.on('submit(select)', function() {
		table.reload('tableProduct', {
			url : '../hGetProducts',
			where : {
				dial : $("#dial1").val(),
				watchCase : $("#watchCase1").val(),
				style : $("#style1").val(),
				beginPrice : $("#beginPrice1").val(),
				endPrice : $("#endPrice1").val(),
				names : $("#names").val()
			}
		})
		return false;
	});
$(function(){
	$.post("../dialProduct",{},function(res){
	 console.log(res)
		for(var i=0;i<res.length;i++){
				$("#dial1").append(`
						<option value="${res[i].dial}">${res[i].dial}</option>
					`)
		}
			form.render("select");		 
	 },"json")
}) 

$(function(){
	$.post("../watchProduct",{ 
	},function(res){
	 console.log(res)
		for(var i=0;i<res.length;i++){
				$("#watchCase1").append(`
						<option value="${res[i].watchCase}">${res[i].watchCase}</option>
					`)
		}
	 form.render("select");	
		 
	 },"json")
}) 
 
$(function(){
	$.post("../styleProduct",{ 
	},function(res){
	 console.log(res)
		for(var i=0;i<res.length;i++){
				$("#style1").append(`
						<option value="${res[i].style}">${res[i].style}</option>
					`)
		}
	 form.render("select");	
		 
	 },"json")
}) 
/* 弹出添加页面 */
		form.on('submit(add)', function() {
	    	$("#baoCun").hide() 
			$("#add_form")[0].reset();
	    	$("#tianJia").show();
			layer.open({
				type : 1,
				content : $("#div_product"),
				area : [ '500px', '800px' ]
			})
			return false;
		});

/*添加 */
form.on('submit(add_ebike)', function() {
	$.post('../insertProduct',$("#add_form").serialize(),function(res){
		layer.msg(res.msg);
		if(res.code=="0"){
			layer.closeAll();
			table.reload('tableProduct');
		}
	},"json");
	return false;
});

/*编辑 */
form.on('submit(update_ebike)', function() {
	$.post('../updateProduct',$("#add_form").serialize(),function(res){
		layer.msg(res.msg);
		if(res.code=="0"){
			layer.closeAll();
			table.reload('tableProduct');
		}
	},"json");
	return false;
});
/*上架下架 */

form.on('switch(editCanUse)', function(data){
	  var id=data.elem.id;
	  var canuse=data.elem.attributes.canuse.nodeValue;
	  $.post("../editCanUse",{
		id :id,
		canUse:canuse
	},function(res){
		layer.msg(res.msg)
		table.reload("tableProduct")
	},"json")
	});




});
function showImg(obj){
	console.log(obj);
	console.log(obj.attributes.imgs.nodeValue)
	$("#img_id_upload").val(obj.id);
	$("#img_url_upload").val(obj.attributes.imgs.nodeValue);
	$("#img_upload").attr("src",'../images/'+obj.attributes.imgs.nodeValue);
	layer.open({
		type : 1,
		content : $("#div_upload"),
		area:["500px","500px"]
})}

function addRecommend(){
	$.post("../insertecommend",$("#addRecommend").serialize(),function(res){
		layer.msg(res.msg)
		if(res.code=="0"){
			layer.closeAll();
		}
	},"json")
}
</script>
</body>
</html>